<template>
  <div class="reading-analysis-page">
    <!-- 页面头部 -->
    <div class="content-header">
      <h1>阅读分析系统</h1>
    </div>

    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :model="filterForm" label-width="100px" size="small" :inline="false">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="星期">
              <el-select v-model="filterForm.weekDay" placeholder="请选择星期" multiple>
                <el-option v-for="item in weekDays" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="书籍分类">
              <el-select v-model="filterForm.category" placeholder="请选择书籍分类" multiple>
                <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="读者年级">
              <el-select v-model="filterForm.grade" placeholder="请选择年级" multiple>
                <el-option v-for="item in grades" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="阅读时长区间">
              <el-input-number v-model="filterForm.minHours" placeholder="最低小时数" :min="0" :max="24" style="width: 45%;"></el-input-number>
              <span class="mx-2">-</span>
              <el-input-number v-model="filterForm.maxHours" placeholder="最高小时数" :min="0" :max="24" style="width: 45%;"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="书籍评分区间">
              <el-input-number v-model="filterForm.minRating" placeholder="最低分" :min="1" :max="5" style="width: 45%;"></el-input-number>
              <span class="mx-2">-</span>
              <el-input-number v-model="filterForm.maxRating" placeholder="最高分" :min="1" :max="5" style="width: 45%;"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="阅读日期区间">
              <el-date-picker v-model="filterForm.startDate" type="date" placeholder="开始日期" style="width: 45%;"></el-date-picker>
              <span class="mx-2">-</span>
              <el-date-picker v-model="filterForm.endDate" type="date" placeholder="结束日期" style="width: 45%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="10">
          <el-col :span="16">
            <el-form-item label="关键词搜索">
              <el-input v-model="filterForm.keyword" placeholder="可搜索读者姓名、书籍名称、作者等">
                <template #append>
                  <el-button type="primary" @click="searchReadings">搜索</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button @click="resetFilter">重置条件</el-button>
              <el-button type="text" @click="toggleAdvancedFilter">
                {{ advancedFilter ? '收起筛选' : '高级筛选' }}
                <i class="el-icon-arrow-down" :class="{ 'el-icon-arrow-up': advancedFilter }"></i>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 高级筛选条件 -->
        <el-collapse-transition>
          <div v-show="advancedFilter">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item label="阅读状态">
                  <el-select v-model="filterForm.readStatus" placeholder="请选择阅读状态">
                    <el-option v-for="item in readStatuses" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="阅读方式">
                  <el-select v-model="filterForm.readMethod" placeholder="请选择阅读方式">
                    <el-option v-for="item in readMethods" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字数范围(千字)">
                  <el-input-number v-model="filterForm.minWordCount" placeholder="最低字数" :min="0" style="width: 45%;"></el-input-number>
                  <span class="mx-2">-</span>
                  <el-input-number v-model="filterForm.maxWordCount" placeholder="最高字数" :min="0" style="width: 45%;"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </el-form>
    </el-card>

    <!-- 数据统计卡片 -->
    <el-card class="mt-4">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(stat, index) in summaryStats" :key="index">
          <el-card :body-style="{ padding: '10px' }" class="stat-card">
            <div class="flex justify-between items-center">
              <div>
                <p class="text-sm text-gray-500">{{ stat.label }}</p>
                <p class="text-2xl font-bold">{{ stat.value }}</p>
              </div>
              <div class="stat-icon" :class="stat.iconClass">
                <i :class="stat.icon"></i>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 阅读数据表格 -->
    <el-card class="mt-4">
      <div class="flex justify-between items-center mb-4">
        <h3>阅读列表</h3>
        <div class="flex items-center">
          <el-button type="text" @click="exportReadings">
            <i class="el-icon-download"></i> 导出 Excel
          </el-button>
          <el-button type="text" @click="refreshReadings">
            <i class="el-icon-refresh"></i> 刷新数据
          </el-button>
        </div>
      </div>

      <el-table 
        :data="displayedReadings" 
        stripe 
        highlight-current-row
        @row-click="handleRowClick"
        size="small"
        border
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="readerId" label="读者编号" align="center" width="100"></el-table-column>
        <el-table-column prop="name" label="读者姓名" align="center" width="100"></el-table-column>
        <el-table-column prop="grade" label="读者年级" align="center" width="100"></el-table-column>
        <el-table-column prop="category" label="书籍分类" align="center" width="100">
          <template #default="scope">
            <el-tag :type="getCategoryType(scope.row.category)">{{ scope.row.category }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bookName" label="书籍名称" align="center" width="160"></el-table-column>
        <el-table-column prop="author" label="作者" align="center" width="100"></el-table-column>
        <el-table-column prop="publisher" label="出版社" align="center" width="120"></el-table-column>
        <el-table-column prop="readDate" label="阅读日期" align="center" width="120"></el-table-column>
        <el-table-column prop="weekDay" label="星期" align="center" width="80">
          <template #default="scope">
            {{ getWeekDayLabel(scope.row.weekDay) }}
          </template>
        </el-table-column>
        <!-- 15.讲解 -->
        <el-table-column prop="hours" label="阅读时长(小时)" align="center" width="120">
          <template #default="scope">
            <el-progress :percentage="scope.row.hours * 4.17" :format="() => `${scope.row.hours}小时`" :color="getHoursColor(scope.row.hours)"></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="wordCount" label="字数(千字)" align="center" width="100"></el-table-column>
        <el-table-column prop="rating" label="书籍评分" align="center" width="100">
          <template #default="scope">
            <el-rate v-model="scope.row.rating" disabled show-text text-color="#ff9900"></el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="readStatus" label="阅读状态" align="center" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.readStatus)">{{ scope.row.readStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="readMethod" label="阅读方式" align="center" width="100"></el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="viewDetails(scope.row)">
              <i class="el-icon-view"></i> 详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalReadings"
        style="margin-top: 20px;"
      ></el-pagination>
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog 
      title="阅读详情" 
      :visible.sync="detailDialogVisible" 
      width="60%"
      @close="clearDetailForm"
    >
      <el-form :model="detailForm" label-width="120px" size="small">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="读者编号">
              <el-input v-model="detailForm.readerId" disabled></el-input>
            </el-form-item>
            <el-form-item label="读者姓名">
              <el-input v-model="detailForm.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="读者年级">
              <el-input v-model="detailForm.grade" disabled></el-input>
            </el-form-item>
            <el-form-item label="书籍分类">
              <el-input v-model="detailForm.category" disabled></el-input>
            </el-form-item>
            <el-form-item label="书籍名称">
              <el-input v-model="detailForm.bookName" disabled></el-input>
            </el-form-item>
            <el-form-item label="书籍作者">
              <el-input v-model="detailForm.author" disabled></el-input>
            </el-form-item>
            <el-form-item label="出版社">
              <el-input v-model="detailForm.publisher" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="阅读日期">
              <el-input v-model="detailForm.readDate" disabled></el-input>
            </el-form-item>
            <el-form-item label="星期">
              <el-input v-model="detailForm.weekDay" disabled></el-input>
            </el-form-item>
            <el-form-item label="阅读时长(小时)">
              <el-input v-model="detailForm.hours"></el-input>
            </el-form-item>
            <el-form-item label="书籍字数(千字)">
              <el-input v-model="detailForm.wordCount"></el-input>
            </el-form-item>
            <el-form-item label="书籍评分">
              <el-rate v-model="detailForm.rating" show-text text-color="#ff9900"></el-rate>
            </el-form-item>
            <el-form-item label="阅读状态">
              <el-select v-model="detailForm.readStatus">
                <el-option v-for="item in readStatuses" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="阅读方式">
              <el-select v-model="detailForm.readMethod">
                <el-option v-for="item in readMethods" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="阅读心得">
          <el-input type="textarea" v-model="detailForm.comment" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveReadingDetails">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import Mock from 'mockjs';
import { ElMessage } from 'element-plus';

// 筛选条件
const filterForm = reactive({
  weekDay: [],
  category: [],
  grade: [],
  minHours: 0,
  maxHours: 24,
  minRating: 1,
  maxRating: 5,
  startDate: '',
  endDate: '',
  keyword: '',
  readStatus: '',
  readMethod: '',
  minWordCount: 0,
  maxWordCount: 9999
});

// 高级筛选开关
const advancedFilter = ref(false);

// 数据字典
const weekDays = [
  { value: 'Monday', label: '周一' },
  { value: 'Tuesday', label: '周二' },
  { value: 'Wednesday', label: '周三' },
  { value: 'Thursday', label: '周四' },
  { value: 'Friday', label: '周五' },
  { value: 'Saturday', label: '周六' },
  { value: 'Sunday', label: '周日' }
];

const categories = [
  { value: '专业书', label: '专业书' },
  { value: '小说', label: '小说' },
  { value: '散文', label: '散文' },
  { value: '科幻', label: '科幻' },
  { value: '工具书', label: '工具书' },
  { value: '诗集', label: '诗集' },
  { value: '历史', label: '历史' },
  { value: '哲学', label: '哲学' },
  { value: '心理学', label: '心理学' },
  { value: '经济学', label: '经济学' }
];

const grades = [
  { value: '大一', label: '大一' },
  { value: '大二', label: '大二' },
  { value: '大三', label: '大三' },
  { value: '大四', label: '大四' },
  { value: '研一', label: '研一' },
  { value: '研二', label: '研二' },
  { value: '研三', label: '研三' },
  { value: '博士', label: '博士' }
];

const readStatuses = [
  { value: '已读完', label: '已读完' },
  { value: '在读中', label: '在读中' },
  { value: '已计划', label: '已计划' },
  { value: '已放弃', label: '已放弃' }
];

const readMethods = [
  { value: '纸质书', label: '纸质书' },
  { value: '电子书', label: '电子书' },
  { value: '听书', label: '听书' },
  { value: '精读', label: '精读' },
  { value: '泛读', label: '泛读' }
];

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const totalReadings = ref(0);

// 详情弹窗
const detailDialogVisible = ref(false);
const detailForm = reactive({
  readerId: '',
  name: '',
  grade: '',
  category: '',
  bookName: '',
  author: '',
  publisher: '',
  readDate: '',
  weekDay: '',
  hours: 0,
  wordCount: 0,
  rating: 0,
  readStatus: '',
  readMethod: '',
  comment: ''
});

// 加载状态
const loading = ref(false);
const refreshTimer = ref(null);

// 丰富的假数据模拟
const mockReadingsData = (() => {
  const data = [];
  const bookTitles = [
    "深入理解计算机系统", "数据结构与算法分析", "Python数据分析实战", "JavaScript高级程序设计", 
    "三体", "流浪地球", "解忧杂货店", "活着", "围城", "平凡的世界", 
    "中国哲学史大纲", "理想国", "梦的解析", "乌合之众", "资本论", 
    "百年孤独", "老人与海", "红楼梦", "论语译注", "时间简史"
  ];
  
  const authors = [
    "托马斯·H·科尔曼", "唐纳德·E·克努斯", "韦斯利·张", "道格拉斯·克罗克福德", 
    "刘慈欣", "东野圭吾", "余华", "钱钟书", "路遥", "冯友兰", 
    "柏拉图", "弗洛伊德", "古斯塔夫·勒庞", "卡尔·马克思", "加西亚·马尔克斯", 
    "欧内斯特·海明威", "曹雪芹", "杨伯峻", "史蒂芬·霍金"
  ];
  
  const publishers = [
    "机械工业出版社", "人民邮电出版社", "清华大学出版社", "中信出版社", 
    "重庆出版社", "南海出版公司", "作家出版社", "生活·读书·新知三联书店", 
    "商务印书馆", "译林出版社", "上海译文出版社", "人民文学出版社", 
    "中华书局", "湖南科学技术出版社"
  ];
  
  for (let i = 0; i < 100; i++) {
    const category = categories[Math.floor(Math.random() * categories.length)].value;
    const readDate = Mock.Random.date('yyyy-MM-dd');
    const weekDay = weekDays[new Date(readDate).getDay() || 7 - 1].value; // 0是周日
    
    data.push({
      readerId: Mock.Random.natural(10000, 99999),
      name: Mock.Random.cname(),
      grade: grades[Math.floor(Math.random() * grades.length)].value,
      category,
      bookName: bookTitles[Math.floor(Math.random() * bookTitles.length)],
      author: authors[Math.floor(Math.random() * authors.length)],
      publisher: publishers[Math.floor(Math.random() * publishers.length)],
      readDate,
      weekDay,
      hours: Mock.Random.float(1, 24, 1, 1),
      wordCount: Mock.Random.natural(10, 1500),
      rating: Mock.Random.natural(1, 5),
      readStatus: readStatuses[Math.floor(Math.random() * readStatuses.length)].value,
      readMethod: readMethods[Math.floor(Math.random() * readMethods.length)].value,
      comment: Mock.Random.paragraph(1, 3)
    });
  }
  
  return data;
})();

const allReadings = ref(mockReadingsData);

// 计算属性：根据筛选条件过滤阅读数据
const filteredReadings = computed(() => {
  let readings = allReadings.value;
  
  // 星期筛选
  if (filterForm.weekDay.length > 0) {
    readings = readings.filter(item => filterForm.weekDay.includes(item.weekDay));
  }
  
  // 书籍分类筛选
  if (filterForm.category.length > 0) {
    readings = readings.filter(item => filterForm.category.includes(item.category));
  }
  
  // 读者年级筛选
  if (filterForm.grade.length > 0) {
    readings = readings.filter(item => filterForm.grade.includes(item.grade));
  }
  
  // 阅读时长筛选
  readings = readings.filter(item => 
    item.hours >= filterForm.minHours && item.hours <= filterForm.maxHours
  );
  
  // 评分筛选
  readings = readings.filter(item => 
    item.rating >= filterForm.minRating && item.rating <= filterForm.maxRating
  );
  
  // 日期筛选
  if (filterForm.startDate && filterForm.endDate) {
    readings = readings.filter(item => 
      item.readDate >= filterForm.startDate && item.readDate <= filterForm.endDate
    );
  }
  
  // 关键词筛选
  if (filterForm.keyword) {
    const keyword = filterForm.keyword.toLowerCase();
    readings = readings.filter(item => 
      item.name.toLowerCase().includes(keyword) || 
      item.bookName.toLowerCase().includes(keyword) || 
      item.author.toLowerCase().includes(keyword) || 
      item.publisher.toLowerCase().includes(keyword)
    );
  }
  
  // 阅读状态筛选
  if (filterForm.readStatus) {
    readings = readings.filter(item => item.readStatus === filterForm.readStatus);
  }
  
  // 阅读方式筛选
  if (filterForm.readMethod) {
    readings = readings.filter(item => item.readMethod === filterForm.readMethod);
  }
  
  // 字数范围筛选
  readings = readings.filter(item => 
    item.wordCount >= filterForm.minWordCount && item.wordCount <= filterForm.maxWordCount
  );
  
  return readings;
});
// 3.讲解
// 计算属性：分页后的数据
const displayedReadings = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredReadings.value.slice(start, end);
});

// 计算属性：统计信息
const summaryStats = computed(() => {
  const readings = allReadings.value;
  const totalCount = readings.length;
  const totalHours = readings.reduce((sum, item) => sum + item.hours, 0);
  const avgRating = readings.length > 0 ? (readings.reduce((sum, item) => sum + item.rating, 0) / readings.length).toFixed(1) : 0;
  const completedCount = readings.filter(item => item.readStatus === '已读完').length;
  
  return [
    { 
      label: '总阅读量', 
      value: totalCount,
      icon: 'el-icon-document',
      iconClass: 'bg-blue-100 text-blue-600'
    },
    { 
      label: '总阅读时长(小时)', 
      value: totalHours.toFixed(1),
      icon: 'el-icon-time',
      iconClass: 'bg-green-100 text-green-600'
    },
    { 
      label: '平均评分', 
      value: avgRating,
      icon: 'el-icon-star-on',
      iconClass: 'bg-yellow-100 text-yellow-600'
    },
    { 
      label: '已完成阅读', 
      value: completedCount,
      icon: 'el-icon-check',
      iconClass: 'bg-purple-100 text-purple-600'
    }
  ];
});

// 生命周期钩子
onMounted(() => {
  console.log('阅读分析组件已挂载');
  totalReadings.value = filteredReadings.value.length;
  
  // 模拟定时刷新
  refreshTimer.value = setInterval(() => {
    console.log('定时刷新数据...');
  }, 30000);
});

onUnmounted(() => {
  console.log('阅读分析组件已卸载');
  clearInterval(refreshTimer.value);
});
// 8.讲解
// 数据监听
watch(filterForm, () => {
  currentPage.value = 1;
  const timer = setTimeout(() => {
    totalReadings.value = filteredReadings.value.length;
  }, 300);
  return () => clearTimeout(timer);
}, { deep: true });

// 搜索阅读数据
const searchReadings = () => {
  currentPage.value = 1;
  totalReadings.value = filteredReadings.value.length;
};

// 重置筛选条件
const resetFilter = () => {
  filterForm.weekDay = [];
  filterForm.category = [];
  filterForm.grade = [];
  filterForm.minHours = 0;
  filterForm.maxHours = 24;
  filterForm.minRating = 1;
  filterForm.maxRating = 5;
  filterForm.startDate = '';
  filterForm.endDate = '';
  filterForm.keyword = '';
  filterForm.readStatus = '';
  filterForm.readMethod = '';
  filterForm.minWordCount = 0;
  filterForm.maxWordCount = 9999;
  
  // 重新加载数据
  searchReadings();
};

// 切换高级筛选
const toggleAdvancedFilter = () => {
  advancedFilter.value = !advancedFilter.value;
};

// 处理分页变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

// 辅助方法：获取星期标签
const getWeekDayLabel = (weekDay) => {
  const item = weekDays.find(item => item.value === weekDay);
  return item ? item.label : weekDay;
};

// 辅助方法：获取分类标签样式
const getCategoryType = (category) => {
  const map = {
    '专业书': 'primary',
    '小说': 'success',
    '散文': 'info',
    '科幻': 'warning',
    '工具书': 'danger',
    '诗集': 'purple',
    '历史': 'orange',
    '哲学': 'teal',
    '心理学': 'pink',
    '经济学': 'blue'
  };
  return map[category] || 'default';
};

// 辅助方法：获取阅读时长颜色
const getHoursColor = (hours) => {
  if (hours >= 18) return '#10b981'; // 绿色
  if (hours >= 12) return '#3b82f6'; // 蓝色
  if (hours >= 6) return '#f59e0b'; // 橙色
  return '#ef4444'; // 红色
};

// 辅助方法：获取状态标签样式
const getStatusType = (status) => {
  const map = {
    '已读完': 'success',
    '在读中': 'info',
    '已计划': 'warning',
    '已放弃': 'danger'
  };
  return map[status] || 'default';
};

// 查看详情
const viewDetails = (row) => {
  // 深拷贝对象，避免直接修改原始数据
  Object.assign(detailForm, { ...row });
  detailDialogVisible.value = true;
};

// 保存阅读详情
const saveReadingDetails = () => {
  const index = allReadings.value.findIndex(reading => 
    reading.readerId === detailForm.readerId &&
    reading.bookName === detailForm.bookName &&
    reading.readDate === detailForm.readDate
  );
  
  if (index !== -1) {
    // 更新数据
    allReadings.value[index] = { ...detailForm };
    ElMessage.success('阅读详情已更新');
  } else {
    ElMessage.warning('未找到对应的阅读记录');
  }
  
  detailDialogVisible.value = false;
};

// 清除详情表单
const clearDetailForm = () => {
  Object.keys(detailForm).forEach(key => {
    detailForm[key] = '';
  });
  detailForm.hours = 0;
  detailForm.wordCount = 0;
  detailForm.rating = 0;
};

// 导出Excel
const exportReadings = () => {
  ElMessage.info('导出功能开发中...');
};

// 刷新数据
const refreshReadings = () => {
  // 重新生成随机数据
  const newData = mockReadingsData();
  allReadings.value = newData;
  totalReadings.value = filteredReadings.value.length;
  
  // 重置分页
  currentPage.value = 1;
  
  ElMessage.success('数据已刷新');
};

// 处理行点击
const handleRowClick = (row) => {
  viewDetails(row);
};
</script>

<style scoped>
.reading-analysis-page {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.mt-4 {
  margin-top: 16px;
}

.mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.text-sm {
  font-size: 12px;
}

.text-gray-500 {
  color: #6c757d;
}

.text-2xl {
  font-size: 24px;
}

.font-bold {
  font-weight: bold;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.stat-card {
  height: 100px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-icon i {
  font-size: 20px;
}
</style>